<template>
	<uni-collapse accordion="true">
		<block v-for="(Item,Index) in dataList" :key="Index">
			<uni-collapse-item class="light" :class="setBgColor(Item)" v-if="Item.c" :title="Item.t" @click="lastClick(Item,Index)" :open="Item.o">
				<Tree class="rr" :dataList="Item.c"></Tree>
			</uni-collapse-item>
			<view v-else class="text11" @click="lastClick(Item,Index)">{{Item.t}}</view>
		</block>
	</uni-collapse>
</template>

<script>
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
	import Tree from "@/components/Tree/tree.vue";
	export default {
		name: "Tree",
		components: {
			uniCollapse,
			uniCollapseItem,
			Tree
		},
		props: {
			dataList: {
				type: Array
			}
		},
		data() {
			return {};
		},
		methods: {
			lastClick(item, i) {
				// console.log(i);
				// console.log(item);
				item.o = item.r!=5? !item.o : false ;
				uni.$emit("lastClick", {
					item: item ,
					index: i
				});
			},
			
			setBgColor(e){
				if(e>=3){
					return 'bg-green';
				}
				let c = {
					0:'bg-red',
					1:'bg-orange',
					2:'bg-blue',
					3:'bg-green',
				}
				return c[e.times];
				
			}
			
		}
	};
</script>

<style lang="scss">
	.uni-collapse-cell.uni-collapse-cell--open {
		border: none;
	}

	.uni-collapse-cell--open {
		background: #fff;
		box-sizing: border-box;
	}

	.text11 {
		display: block;
		height: 48px;
		line-height: 24px;
		box-sizing: border-box;
		padding: 24rpx;
		font-size: 28rpx;
		border-bottom: 0.5px solid $uni-border-color;
	}

	.uni-collapse-cell--open .text11 {
		// padding-left: 48rpx;
	}

	.uni-collapse-cell--open .rr {
		padding-left: 48rpx;
	}
</style>
